<template>
  <div class="config">
    <top-tab :list="tabList" :tabIndex.sync="tabIndex"></top-tab>
    <!-- <config-color v-if="tabIndex === 0"/> -->
    <config-voice v-if="tabIndex === 0"/>
    <config-font v-if="tabIndex === 1"/>
    <!-- <back-cover v-if="tabIndex === 2"/> -->
  </div>
</template>

<script>
import topTab from '@/components/top-tab.vue'
import configColor from '@/components/configColor.vue'
import configVoice from '@/components/configVoice.vue'
import configFont from '@/components/configFont.vue'
import backCover from '@/components/backCover.vue'
export default {
  components: { backCover, topTab, configVoice, configColor, configFont },
  data () {
    return {
      tabList: ['声音', '字体'],
      tabIndex: 0
    }
  },
  mounted () {
    document.title = '个性化参数'
  },
}
</script>

<style scoped>
.config {
  margin-top: 16vw;
  background: #F8F8FA;
  padding-bottom: 21.33vw;
}
</style>